<template>
  <div  class="student"> 
    <h2>学生姓名: {{name}}</h2> 
    <h2>学生年龄: {{age}}</h2>  
    <h2>当前的 n 值为 {{number}} </h2>
    <button @click="add">点我 n + 1</button>
    <button @click="sendStudnetName" >点我发送学校名给 App</button>
    <button @click="unbind">点我解绑lingchen事件</button>
    <button @click="death">点我销毁 Student 实例</button> 
  </div>
</template>

<script> 
  export default {
    name:'Student',
    data() {
      return { 
        name:'张三', 
        age: 18,
        number: 1
      }
    }, 
    methods: {
      add(){
        console.log('add被调用了')
        this.number ++
      },
      sendStudnetName(){
        // 触发 Studnet 的实例对象 vc 上绑定的 lingchen 事件
        this.$emit('lingchen', this.name)
      },
      unbind(){
        this.$off('lingchen') // 解绑一个自定义事件
        // this.$off(['lingchen', 'atguigu']) // 解绑多个自定义事件
        // this.$off() // 解绑所有的自定义事件
      },
      death(){
        this.$destroy() // 销毁了当前 Student 组件的实例对象，销毁后所有的 Student 实例的自定义事件都不奏效。
      }
    },
  } 
</script>
<style scoped>
  .student{
    background-color: skyblue;
    padding: 5px;
    margin-top: 30px;
  }
</style>
